<template>
  <header>
    <!-- 头部容器 -->
    <div id="headerContainer">
      <!-- logo 部分 -->
      <div class="headerLogo">
        <img src="../assets/images/logo.png" alt="Logo" />
      </div>
      <!-- 导航栏部分 -->
      <el-menu
        :default-active="activeIndex"
        active-text-color="#1ECDB9"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">职位管理</el-menu-item>
        <el-menu-item index="3">简历管理</el-menu-item>
        <el-menu-item index="4">信息</el-menu-item>
      </el-menu>
      <!-- 我的信息部分 -->
      <div class="headerMyInfo">
        <!-- 用户头像 -->
        <img :src="userInfo.userImg" alt="User" />
        <!-- 用户信息 -->
        <div class="info">
          <p v-text="userInfo.name"></p>
          <span v-text="userInfo.company"></span>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
// 引用公用样式
import "../assets/css/all.css"

export default{
    name: "Header",
    data(){
        return {
            logo: "@/assets/images/logo.png",
            userInfo:{
                userImg: require("../assets/images/user.png"),
                name: "胡国志",
                company: "未绑定公司"
            },
            activeIndex: "1",
        }
    },
    methods: {
        handleSelect(key,keyPath){
            console.log(key,keyPath);
        }
    }
}
</script>

<style scope>
/* ----------------------- 头部部分  ----------------------- */
header{
    width: 100%;
    height: 70px;
    background: white;
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .1);
    /* 固定定位 */
    position: fixed;
    top: 0;
    left: 0;
}
/* 头部容器部分 */
#headerContainer{
    max-width: 1200px;
    height: inherit;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all ease .6s;
}
/* Logo 部分 */
#headerContainer .headerLogo{
    flex: 1;
}
#headerContainer .headerLogo img{
    width: 157px;
    height: 35px;
    cursor: pointer;
}

/* 导航栏部分 */
#headerContainer .el-menu-demo{
    height: 70px;
    flex: 2;
    transition: all ease .6s;
}
#headerContainer .el-menu-demo .el-menu-item{
    font-size: 14px;
    height: inherit;
    margin: 0 10px;
}
.el-menu.el-menu--horizontal{
    border-bottom: none;
}

/* 我的信息部分 */
#headerContainer .headerMyInfo{
    text-align: center;
    flex: 1;
    display: flex;
    justify-content: flex-end;
    border-left: 1px solid rgba(0,0,0,.1);
}
/* 用户头像 */
#headerContainer .headerMyInfo img{
    width: 36px;
    height: 36px;
    cursor: pointer;
}
/* 用户信息 */
#headerContainer .headerMyInfo .info{
    width: 80px;
    height: 36px;
    text-align: left;
    cursor: pointer;
    margin: 0 0 0 20px;
}
#headerContainer .headerMyInfo .info p{
    font-size: 14px;
}
#headerContainer .headerMyInfo .info span{
    color: #9fa9ba;
    font-size: 10px;
}

/* --------------------  媒体查询  ------------------------ */
/* 手机端 */
@media screen and (max-width:850px) {
    /* 头部容器 */
    #headerContainer{
        margin: 0 10px;
        transition: all ease 6s;
    }
    /* 导航栏隐藏 */
    .el-menu-demo{
        display: none;
        transition: all ease 6s;
    }
    /* 边框消失 */
    #headerContainer .headerMyInfo{
        border-left: none;
    }
}
</style>